<template>
  <div>
    你好小刘，我们今天会把所有事做完的
    <p v-text="name"></p>
    <p>{{age}}</p>
    <p v-html="info"></p>
    <p v-bind:data="dataVal">我是data</p>
    <p :class="{'red':isRed}">hong</p>
    <p v-if="istrue">if here</p>
     <p v-show="istrue">show here</p>
     <p v-if="istrue">if33 here</p>
     <p v-else>if here</p>
     <u1>
       <li v-for="(item,index) in userList" :key="index"> 
         学生姓名：{{item.username}}
         学生年龄：{{item.userage}}
       </li>
     </u1>

  </div>
</template>

<script>
import {reactive,toRefs} from "vue"
export default{
  name:"home",
  setup(){
    const data = reactive({
      name:"xiaoyanzi",
      age:22,
      dataVal:1000,
      info:"<i>哎呀呀，我歇了</i>",
      isRed:true,
      istrue:!true,
      userList:[
        {
          username:"kaka",
          userage:10
        },
        {
          username:"xiiii2",
          userage:11
        },
        {
          username:"kakaxiiii",
          userage:12
        }
        
      ]
    })

    return{
      ...toRefs(data)
    }
  }
}

</script>
<style>
  .red{
    color: brown;
  }

</style>